<template>
  <div class="app-container">
    <h2 class="con-title">订单运费明细</h2>
    <div class="content">
      <div class="source content">
        <div class="input-line">
          <div class="input-inline">
            <label class="input-label">订单编号：</label>
            <div class="el-input" style="width:180px">
              <input type="text" autocomplete="off" placeholder="请输入订单编号" class="el-input__inner" v-model="listQuery.orderCode">
            </div>
          </div>
          <div class="input-inline">
            <label class="input-label">订单交易类型：</label>
            <div class="el-input" style="width:180px">
              <el-select v-model="listQuery.transactionType" clearable placeholder="请选择类型">
                <el-option v-for="item in dealTypeOption" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </div>
          </div>
          <div class="input-inline">
            <label class="input-label">支付方式：</label>
            <div class="el-input" style="width:180px">
              <el-select v-model="listQuery.payType" clearable placeholder="请选择支付方式">
                <el-option v-for="item in payTypeOption" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </div>
          </div>
          <div class="input-inline">
            <label class="input-label">上传时间：</label>
            <div class="el-input" style="width:180px">
              <el-date-picker v-model="listQuery.startDate" type="date" placeholder="选择开始日期" :picker-options="pickerOptions1" value-format="yyyy-MM-dd">
              </el-date-picker>
            </div>
            <div class="form-mid">-</div>
            <div class="el-input" style="width:180px">
              <el-date-picker v-model="endDate" type="date" placeholder="选择结束日期" :picker-options="pickerOptions2" value-format="yyyy-MM-dd">
              </el-date-picker>
            </div>
          </div>
        </div>
        <el-button type="primary" icon="el-icon-search" style="position: absolute;top:20px;right:20px;" size="small" @click="searchSubmit">搜索</el-button>
      </div>
      <el-table :data="list" ref="tableData" v-loading.body="listLoading" stripe element-loading-text="Loading" border highlight-current-row>
        <el-table-column align="center" label='订单编号' min-width="160px">
          <template slot-scope="scope">
            {{scope.row.orderCode}}
          </template>
        </el-table-column>
        <el-table-column align="center" label="支付方式" min-width="80px">
          <template slot-scope="scope">
            {{scope.row.payType|formatType}}
          </template>
        </el-table-column>
        <el-table-column align="center" label="支付通道">
          <template slot-scope="scope">
            {{scope.row.payPassageway|formatWay}}
          </template>
        </el-table-column>
        <el-table-column align="center" label="订单交易类型">
          <template slot-scope="scope">
            {{scope.row.transactionType|formatTradeWay}}
          </template>
        </el-table-column>
        <el-table-column align="center" label="订单交易时间" min-width="140px">
          <template slot-scope="scope">
            {{scope.row.transactionDate| formatDate("yyyy-MM-dd hh:mm")}}
          </template>
        </el-table-column>
        <el-table-column align="center" label="承运人" min-width="120px">
          <template slot-scope="scope">
            {{scope.row.logisticsName}}
          </template>
        </el-table-column>
        <el-table-column align="center" label="运单号" min-width="120px">
          <template slot-scope="scope">
            {{scope.row.expressCode}}
          </template>
        </el-table-column>
        <el-table-column label="运费收支金额（元）" align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.transactionType === 1" class="success">+{{scope.row.freightIncomeMoney|formatMoney}}</span>
            <span v-else class="danger">-{{scope.row.freightExpensesMoney|formatMoney}}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="订单交易时间" min-width="140px">
          <template slot-scope="scope">
            {{scope.row.createDate| formatDate("yyyy-MM-dd hh:mm")}}
          </template>
        </el-table-column>
        <!--<el-table-column align="center" label='服务费'>
        <template slot-scope="scope">
        </template>
      </el-table-column>-->
      </el-table>
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="listQuery.pageIndex"
        :page-sizes="[10, 20, 30, 40]" :page-size="listQuery.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
  import {
    getFreightList
  } from '@/api/finance'
  export default {
    data() {
      return {
        total: 0,
        listQuery: {
          pageIndex: 1,
          pageSize: 20
        },
        list: null,
        listLoading: true

      }
    },
    filters: {
      formatType(val) {
        const typeMap = {
          1: '微信',
          2: '支付宝',
          3: '银联',
          4: '转账',
          5: '余额',
          6: '财付通',
          7: '金桥一卡通支付'
        }
        return typeMap[val]
      },
      formatWay(val) {
        const wayMap = {
          1: '安卓',
          2: '苹果',
          3: 'PC',
          4: '接口',
          5: '接口',
          6: '终端订单',
          7: '导单',
          8: 'H5'
        }
        return wayMap[val]
      },
      formatTradeWay(val) {
        const wayMap = {
          1: '销售',
          2: '退款'
        }
        return wayMap[val]
      }
    },
    created() {
      this.fetchData()
    },
    methods: {
      // 列表加载
      fetchData() {
        this.listLoading = true
        // 获取金额列表
        getFreightList(this.listQuery).then(res => {
          this.list = res.data.transactionFreightList
          this.total = res.data.total
          this.listLoading = false
        })
      },
      searchSubmit() {
        this.listQuery.pageIndex = 1
        this.fetchData()
      },
      handleSizeChange(val) {
        this.listQuery.pageSize = val
        this.fetchData()
      },
      handleCurrentChange(val) {
        this.listQuery.pageIndex = val
        this.fetchData()
      }

    }
  }

</script>
<style rel="stylesheet/scss" lang="scss">
  @import 'src/assets/css/jx-order.scss';
  @import 'src/assets/css/sui-style.scss';
  .success {
    color: #67c23a
  }

  .danger {
    color: #f56c6c
  }

</style>
